import Vue from 'vue'
import Router from 'vue-router'
import { routes } from './router'
import iView from 'iview'
import store from '@/store'
import { setTitle, getToken } from "@/lib/util"
// import { setToken } from '../lib/util'

Vue.use(Router)

const router = new Router({
  // mode 默认值为hash模式
  // html的history模式 使用history d的api来做页面的无刷新跳转
  // history的URL变化时有可能找不到静态资源，需要把所有的静态资源都指向到index.html 需要后端支持
  // mode: 'history',
  routes
})

// 全局前置守卫
// 增加回调函数 to-即将跳转的对象 from-即将离开的对象 next-函数
router.beforeEach((to, from, next) => {
  iView.LoadingBar.start()
  to.meta && setTitle(to.meta.title)

  const token = getToken()
  if (token) {
    if (!store.state.router.hasGetRules) {
      store.dispatch('navMenu').then(rules => {
        store.dispatch('concatRoutes', rules).then(routerList => {
          console.log('routerList', routerList)
          router.addRoutes(routerList)
          next({ ...to, replace: true })
        }).catch(() => {
          console.log('error')
          next({ name: 'login' })
        })
      })
    } else {
      next()
    }
    // if (to.name === 'login') next({ name: 'main' })
    // else next()
  } else {
    if (to.name === 'login') next()
    else next({ name: 'login' })
  }
})

// 全局前置守卫 所有导航菜单被确认后 所有组件内守卫被执行 所有异步路由被触发后 执行
// router.beforeResolve((to, from, next) => {})

// 后置钩子
router.afterEach((to, from) => {
  // 取消logging 加载效果
  iView.LoadingBar.finish()
})

/**
 * 1. 导航被触发
 * 2. 在失活的组件（即将离开的页面组件）里调用离开守卫 beforeRouteLeave
 * 3. 调用全局的前置守卫 beforeEach
 * 4. 在重用的组件里调用 beforeRouteUpdate
 * 5. 调用路由独享守卫 beforeEnter
 * 6. 解析异步路由
 * 7. 在被激活的组件（即将进入的页面组件）里调用 beforeRouteEnter
 * 8. 调用全局的解析守卫 beforeResolve
 * 9. 导航被确认
 * 10. 调用全局的后置守卫 afterEach
 * 11. 触发DOM更新
 * 12. 用创建好的实例调用beforeRouteEnter守卫里面传给next的回调函数
 */

export default router
